<template>
	<div class="previewBox">

		<div class="PreviewHead" v-if="CountDown<0">
			<div class="coverImgWrap" @click="upLoadImg">
				<image :src="coverImg" class="liveCover"></image>
				<text class="liveCoverTipText">上传封面</text>
			</div>
			<div>
				<div class="sortWrap">
					<input v-model="liveTitle" class="colorWhite nameInput" type="text" placeholder="请输入直播间名称" placeholder-style="color:#fff;" maxlength="12" min="1" @blur="onBlur" @keyboard="onKeyBoard" />
				</div>
			</div>
		</div>
		<div class="CountDownWrap" v-if="CountDown>0">
			<text class="CountDownWrapText">{{CountDown}}</text>
		</div>
		<div class="previewBottom" v-if="CountDown<0" :style="{marginTop:previewMarginTop+'rpx'}">
			<div class="previewBottomSort">
				<div class="bottomItem" v-for="(item,index) in bottomList" :key="index" @click="previewSetting(index)">
					<image :src="item.icon" class="bottomItemIcon"></image>
					<text class="colorWhite">{{item.name}}</text>
					<span v-if="item.isNew" class="newDot"></span>
				</div>
			</div>

			<div class="openLiveBtn" @click="submitData()">
				<text class="openLiveBtnText">开启视频直播</text>

			</div>
		</div>

		<wxc-popup :show="isSortShow" ref="sortPop" popup-color="rgba(0,0,0,0)"
			@wxcPopupOverlayClicked="popupOverlayBottomClick" pos="bottom" height="600">
			<scroller class="sortScroller">
				<div v-for="(item,index) of typeList" :key="index" class="sortItem"
					@click="selectItem(item.id,item.type_name)">
					<text class="sortItemText">{{item.type_name}}</text>
				</div>
			</scroller>
		</wxc-popup>
		<wxc-loading :show="isLoadingShow" v-if="false" :loading-text="loadingText"></wxc-loading>
	</div>
</template>

<script>
	import {
		WxcButton,
		WxcIcon,
		WxcLoading,
		WxcPopup,
		WxcTag
	} from 'weex-ui'
	import liveJS from '../live'
	import {
		SECRETKEY
	} from "@/config/index"
	import md5Libs from "uview-ui/libs/function/md5";
	const md5 = md5Libs.md5;

	const modal = weex.requireModule('modal')
	export default {
		name: 'livePreview',
		mixins: [liveJS],
		data() {
			return {
				liveTitle: "",
				isLoadingShow: false,
				loadingText: '',

				popoverPosition: {
					x: 186,
					y: 320
				},
				popoverArrowPosition: {
					pos: 'top',
					x: 130
				},

				coverImg: '',
				cover: '',
				CountDown: -1,

				typeList: [],
				isSortShow: false,
				sortID: '',
				sortName: "",
				previewMarginTop: 0
			}
		},
		components: {
			WxcIcon,
			WxcButton,
			WxcTag,
			WxcPopup,
			WxcLoading
		},
		mounted() {
			this.previewMarginTop = uni.getSystemInfoSync().windowHeight - 100
			this.loadingText = '正在上传中...'
			if(uni.getStorageSync('coverImg') != ''){
				this.coverImg = uni.getStorageSync('coverImg')
				this.cover = uni.getStorageSync('cover')
			}
			
		},
		computed: {
			bottomList() {
				return [{
						icon: 'https://de.ccbnd.net/jtwj/xcx/live/icon-setting.png',
						name: '翻转',
						isNew: false,
					}, {
						icon: 'https://de.ccbnd.net/jtwj/xcx/live/icon-setting.png',
						name: '美化',
						isNew: false,
					}, {
						icon: 'https://de.ccbnd.net/jtwj/xcx/live/icon-setting.png',
						name: '商品',
						isNew: false,
					}, {
						icon: '/static/images/icon-setting.png',
						name: '分享',
						isNew: false,
					},
					{
						icon: 'https://de.ccbnd.net/jtwj/xcx/live/icon-setting.png',
						name: '设置',
						isNew: false,
					}
				]
			}
		},

		methods: {
			minibarRightButtonClick() {
				this.isSortShow = true
			},
			popupOverlayBottomClick() {
				this.isSortShow = false;
			},
			onBlur(e) {
				console.log(e);
			},
			onKeyBoard(e) {
				console.log(e);
			},
			// 选择分类
			selectItem(id, name) {
				this.sortID = id
				this.sortName = name
				this.$refs.sortPop.hide()
			},

			// 直播间信息表单提交事件
			submitData() {
				const data = {
					cover: this.cover,
					title: this.liveTitle,
				}
				// 必传参数检测

				const list = Object.values(data)
				const tips = [
					'请上传直播封面图',
					'请输入直播间名称',
				]
				for (let index = 0; index < list.length; index++) {
					if (list[index].length === 0) {
						modal.toast({
							message: tips[index],
							duration: 0.3
						})
						return
					}
				}

				this.http('api/Live/launchlive', data).then(res => {
					const status = res.data.status
					const mess = res.data.mess
					
					if (status === 200) {
						uni.setStorage({
							key: 'pushUrl',
							data: res.data.data,
							success: () => {
								uni.setStorageSync('coverImg',this.coverImg)
								uni.setStorageSync('cover',this.coverImg)
								this.openLivePlayer()
							}
						});
					} else if (status === 400) {
						modal.confirm({
							message: mess,
							duration: 0.3
						}, function(value) {
							if (value === "OK") {
								uni.navigateTo({
									url: '/pagesB/login/login'
								});
							}
						})
					} else {
						// 抛出异常
						modal.toast({
							message: mess,
							duration: 0.5
						})
					}
				})
			},
			//  通知开播事件
			openLivePlayer() {
				//倒计时
				this.CountDown = 3
				let countdown = setInterval(() => {
					this.CountDown--
					if (this.CountDown < 1) {
						clearInterval(countdown)
						return this.$parent.startLive()
					}
				}, 1000)
			},

			// 上传直播封面图
			upLoadImg() {
				const formData = {
					api_token: md5(
						`api/Common/uploadPic${SECRETKEY}`
					),
					client_id: 1,
					token: uni.getStorageSync("token")
				};
				
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: imgData => {
						this.isLoadingShow = true
						
						uni.uploadFile({
							url: this.baseUrl + '/api/Common/uploadPic',
							filePath: imgData.tempFilePaths[0],
							name: 'file',
							formData: formData,
							success: res => {
								const data = JSON.parse(res.data)
								this.coverImg = data.data.full_path
								this.cover = data.data.path
								uni.setStorageSync('hasCoverImg', data.data.full_path)
								this.isLoadingShow = false
								
							},
							fail: err => {
								
							},
							complete: req => {
								
							}
						})
					},
					complete: e =>{
						setTimeout(()=>{
							this.$emit('stopPreview')
							this.$emit('startPreview')
						},100)
					}
				});

			},
			previewSetting(index) {
				this.$emit('previewSetting', index)
			}
		}

	}
</script>

<style scoped>
	.previewBox {
		position: fixed;
		width: 700rpx;
		left: 25rpx;
		padding: 30rpx 50rpx;
		right: 0;
		bottom: 0;
		top: 0;
		margin: 140rpx 0;

	}

	.PreviewHead {
		flex-direction: row;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 12rpx;
		padding: 8rpx;
	}

	.coverImgWrap {
		position: relative;
		width: 110rpx;
		height: 110rpx;
		margin: 0 8rpx;
		border: 2rpx solid #d7d1ca;
		border-radius: 8rpx;
	}

	.liveCover {
		width: 110rpx;
		height: 110rpx;

		border-radius: 6rpx;
		overflow: hidden;
		background-color: transparent;
	}

	.liveCoverTipText {

		font-size: 20rpx;
		position: absolute;
		left: 0;
		bottom: 0;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.3);
		text-align: center;
		width: 110rpx;
		padding: 4rpx 0;
	}

	.title {
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
	}

	.iconEdit {
		width: 30rpx;
		height: 30rpx;
	}

	.colorWhite {
		color: #fff;
		font-size: 26rpx;
	}

	.sortWrap {
		flex-direction: row;
		align-items: center;
	}

	.previewBottom {
		flex: 1;
	}

	.previewBottomSort {
		flex-direction: row;
		flex-wrap: wrap;

	}

	.bottomItem {
		width: 115rpx;
		justify-content: center;
		align-items: center;
		padding: 25rpx;
		position: relative;
	}

	.bottomItemIcon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 14rpx;
	}

	.openLiveBtn {
		text-align: center;
		background-color: #fa3f3f;
		border-radius: 400rpx;
		height: 88rpx;

		margin-top: 20rpx;
	}

	.openLiveBtnText {
		text-align: center;
		color: #fff;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 88rpx;
	}

	.newDot {
		width: 12rpx;
		height: 12rpx;
		border-radius: 100px;
		background-color: yellow;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.CountDownWrap {
		width: 300rpx;
		height: 300rpx;
		border-radius: 400px;
		background-color: rgba(255, 255, 255, 0.3);
		position: fixed;
		top: 500rpx;
		left: 200rpx;
		justify-content: center;
		align-items: center;
	}

	.CountDownWrapText {
		font-size: 120rpx;
		color: #fff;
		font-weight: 800;
	}

	.nameInput {
		width: 420rpx;
		height: 60rpx;
		font-size: 30rpx;
		font-weight: 500;
		margin-left: 16rpx;
		border-bottom: 2rpx solid #d7d1ca;
		padding: 10rpx;
	}

	.sortScroller {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx 20rpx;
		width: 750rpx;
	}

	.sortItem {
		padding: 26rpx 30rpx;
		border-bottom-width: 2rpx;
		border-color: #f5f5f5;
		border-style: solid;
	}

	.sortItemText {
		font-size: 32rpx;
		text-align: center;
	}
</style>
